/* 1.通配选择器（全局选择器） 选择所有元素 */
*{
    /* background-color: red; */
    /* 通常情況下，用来清除标签的默认样式 */
    margin: 0px; /* 设置标签的默认外边距为0 */
    padding: 0px;/* 设置表亲的默认内边距为0 */
}

/* 2.标签选择器 通过标签的名字选中元素
    测试的时候可以用 但是在实际开发中不建议使用
    在同一个html中同样的标签可能存在上百或千个 样式不一
*/
/*div{
    background-color: red;
}
 a{}
p{}
span{}
ul{}
img{} */

/* 3.类选择器（class选择器） 根据标签的class属性的值来获取元素
    可以同时选中多个元素
*/
/* .hello{
    background-color: yellow;
} */

/* 4.ID选择器 通过标签的ID属性值来选择元素 
id在页面中通常我们只能出现一次 不能使用多个同名的id值
*/
/* #p{
    background-color: yellow;
} */

/* 5.交集选择器 第一个选择选中多个标签共有的 第二个选择器选中特有的 */
/* div#box{
    color: red;

} */

/* 6.并集选择器 一起选中多个不同属性和标签的元素 同时设置值 */
/* li,.hello,#box,a,span{
    color: red;
} */

/* 7.后代元素选择器 选中某个元素的所有后代 */
/* 选中class为test的标签的所有包裹着的后代元素 */
/* .test span{
    color:  red;
} */

/* 8.子元素选择器 只会选中标签的直接子元素 */
/* .test > span{
    color: red;
} */


/*9. 相邻元素选择器 */
/* 选中h1的相邻的兄弟 */
h1+p{
    color: red;;
}

/* 10.兄弟（同胞）元素选择 选择和自己是同胞的所有满足条件的元素 */
h1~p{
    color: green;
}